/*
 * @author hzq
 * @date 2024-12-07 19:18:56
 * @description 拖拽指令
 * @usage v-darg
 * @see 🚀
 * @status done
 */

// 导入Vue中的Directive类型
import type { Directive } from 'vue'

// 定义一个ElType接口，继承HTMLElement，并添加parentNode属性
interface ElType extends HTMLElement {
  parentNode: any
}

/**
 * 拖拽指令
 */
export const darg: Directive = {
  // 指令被绑定到元素上时调用
  mounted: function (el: ElType) {
    // 设置鼠标样式为移动
    el.style.cursor = 'move'
    // 设置元素为绝对定位
    el.style.position = 'absolute'
    // 监听鼠标按下事件
    el.onmousedown = function (e) {
      // 计算鼠标按下时，鼠标位置与元素左上角的距离
      const disX = e.pageX - el.offsetLeft
      const disY = e.pageY - el.offsetTop
      // 监听鼠标移动事件
      document.onmousemove = function (e) {
        // 计算元素的新位置
        let x = e.pageX - disX
        let y = e.pageY - disY
        // 计算父元素的宽度和高度
        const maxX =
          parseInt(window.getComputedStyle(el.parentNode).width) -
          parseInt(window.getComputedStyle(el).width)
        const maxY =
          parseInt(window.getComputedStyle(el.parentNode).height) -
          parseInt(window.getComputedStyle(el).height)
        // 如果元素的新位置超出父元素的范围，则将其限制在父元素范围内
        if (x < 0) {
          x = 0
        } else if (x > maxX) {
          x = maxX
        }

        if (y < 0) {
          y = 0
        } else if (y > maxY) {
          y = maxY
        }
        // 设置元素的新位置
        el.style.left = x + 'px'
        el.style.top = y + 'px'
      }
      // 监听鼠标松开事件
      document.onmouseup = function () {
        // 移除鼠标移动和松开事件的监听
        document.onmousemove = document.onmouseup = null
      }
    }
  }
}
